import React, { Component } from 'react';
import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';
import { DataSet } from '@antv/data-set';
import axios from 'axios';
import cookie from 'react-cookies';

export default class AreaChart extends Component {
  static displayName = 'AreaChart';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      date: [],
      hmany: [],
      chartdata: [],
    };
  }

  componentWillMount() {
    const sessionid = cookie.load('sessionId');
    const dateurl = 'http://39.105.21.199:8989/IPEvaluation/evaluateManage/countEvaluateNumByDate.do?sessionId='
    axios.post(dateurl + sessionid).then((response) => {
      console.log(response.data);
      const message = response.data.data;
      const datearray = message.split(',');
      console.log(datearray);
      for (let i = 0; i < datearray.length; i++) {
        if (i > 2) {
          const array = datearray[i].split('=');
          const datenum = array[0];
          const num = array[1];
          this.state.date.push(datenum);
          this.state.hmany.push(num);
        }
      }
      const data = [];
      for (let i = 0; i < this.state.date.length; i++) {
        const data1 = this.state.date[i];
        const data2 = this.state.hmany[i];
        data.push({
          month: data1,
          number: data2,
        });
      }
      this.setState({ chartdata: data });
    }).catch((error) => {
      console.log(error);
    });
  }
  getdata =() => {
    const data = [];
    for (let i = 0; i < this.state.date.length; i++) {
      const data1 = this.state.date[i];
      const data2 = this.state.hmany[i];
      data.push({
        month: data1,
        number: data2,
      });
    }
    return data;
  }

  render() {
    const data = this.getdata();
    console.log('area', data);
    const dv = new DataSet.View().source(this.state.chartdata);
    dv.transform({
      type: 'fold',
      fields: ['number'],
      key: 'type',
      value: 'value',
    });

    const scale = {
      value: {
        alias: 'The Share Price in Dollars',
        formatter: (val) => {
          return `${val}`;
        },
      },
      month: {
        range: [0, 1],
      },
    };

    return (
      <Chart
        height={400}
        data={dv}
        padding={[40, 30, 40, 50]}
        scale={scale}
        forceFit
      >
        <Tooltip crosshairs />
        <Axis />
        <Legend />
        <Geom type="area" position="month*value" color="type" shape="smooth" />
        <Geom
          type="line"
          position="month*value"
          color="type"
          shape="smooth"
          size={2}
        />
      </Chart>
    );
  }
}
